{extend name="layout/iframe" /}

{block name="content"}
<div class="layui-card-body layui-layout-admin" style="padding: 15px;">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form h between">
            <div class="layui-inline searchBox">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input name" name="name" placeholder="请输入商品名" />
                </div>
                <input type="text" class="layui-input" value="阻止回车键提交" style="display: none;">
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
                <button type="reset" class="layui-btn layui-btn-danger reset_btn"><i class="layui-icon">&#xe669;</i></button>
            </div>
            <div class="layui-inline">
            </div>
        </form>
    </blockquote>

    <form class="layui-form" action="" lay-filter="component-form-group">
        <table id="dataTable" lay-filter="dataTable"></table>

        <div class="layui-form-item layui-row layui-col-xs12">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <button type="button" class="layui-btn layui-btn-primary close-btn"><i class="layui-icon">&#xe65c;</i> 取消</button>
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="layConfirm">确定 <i class="layui-icon">&#xe605;</i></button>
                </div>
            </div>
        </div>
    </form>
</div>

<input type="hidden" class="datalist_url" value="{:url('admin/productprice/selectproducts')}">
<input type="hidden" class="set_productprice_url" value="{:url('admin/productprice/setproductprice')}">
{/block}

{block name="pagescript"}
<script type="text/javascript">
    layui.use(['form', 'layer', 'table'], function(){

        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            table = layui.table;

        var datalist_url = $('.datalist_url').val();
        var set_productprice_url = $('.set_productprice_url').val();


        datalist_url += '?product_ids=' + $(parent.window.frames[0].document).find('.product_ids').val();
        // Table 列表
        var tableIns = table.render({
            elem: '#dataTable',
            url : datalist_url,
            page : true,
            cellMinWidth : 95,
            //height : "full-100",
            limit : 10,
            limits : [10, 20, 50, 100],
            id : "tableList",
            cols : [[
                {type: "checkbox", fixed:"left", width:50, event:'checkId'/*, LAY_CHECKED:true*/},
                {field: 'img_url', title: '封面图', minWidth:80, align:"center", templet:function(data){
                    return '<a href="'+data.img_url+'" target="_blank"><img src="'+data.img_url+'" style="width: 80px;" /></a>';
                }},
                {field: 'name', title: '商品名称', minWidth:140},
                {field: 'bar_code', title: '条码', align:'center', minWidth:140},
                {field: 'category_id', title: '分类', align:'center'},
                {field: 'purchase_price', title: '进货价', align:'center', templet:function(data){
                    return data.purchase_price / 100;
                }},
                {field: 'price', title: '售价', align:'center', sort: true, templet:function(data){
                    return data.price / 100;
                }},
                {field: 'wholesale_price', title: '批发价', align:'center', templet:function(data){
                    return data.wholesale_price / 100;
                }},
                /*{field: 'member_integral', title: '会员积分', align:'center', edit: 'text'},*/
            ]],
            done: function(res, curr, count){
                // 如果是异步请求数据方式，res即为你接口返回的信息。
                // 如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                //console.log(res);
                // 得到当前页码
                //console.log(curr);
                // 得到数据总量
                //console.log(count);
                var data = res.data;
                var product_ids_elm = $(parent.window.frames[0].document).find('.product_ids');
                var product_ids = product_ids_elm.val();
                for(var i=0; i<data.length; i++){
                    if (product_ids.indexOf(data[i].id) != -1) {
                        res.data[i]["LAY_CHECKED"] = 'true';
                        // 下面三句是通过更改css来实现选中的效果
                        var index = res.data[i]['LAY_TABLE_INDEX'];
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                        $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                }
            }
        });

        // 搜索
        $(".search_btn").on("click", function(){
            if($('.name').val() != ''){
                table.reload("tableList", {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        name: $('.searchBox').find('input[name=name]').val()  // 搜索的关键字
                    }
                });
            }else{
                layer.msg("请输入搜索的内容");
            }
        });

        // 清空搜索
        $(".reset_btn").on("click", function(){
            table.reload("tableList", {
                where: {
                    name: ''
                }
            });
        });

        // 监听单元格事件
        /*table.on('tool(dataTable)', function(obj){
            var data = obj.data;
            var checkStatus = table.checkStatus('tableList');
            if(obj.event === 'checkId'){
                //console.log(obj);
                console.log(checkStatus.data);
            }
        });*/
        // 监听表格复选框选择
        table.on('checkbox(dataTable)', function(obj){
            //console.log(obj);
            var product_ids_elm = $(parent.window.frames[0].document).find('.product_ids');
            var product_ids = product_ids_elm.val();
            if (obj.checked) {
                // 选中
                // 添加商品
                if(product_ids){
                    product_ids = product_ids + ',' + obj.data.id;
                }else{
                    product_ids = obj.data.id;
                }
                product_ids_elm.val(product_ids);
            } else {
                // 未选中
                // 删除商品
                var arr = product_ids.split(',');
                var new_product_ids = '';
                for(var i = 0; i < arr.length; i++){
                    if(arr[i] != obj.data.id){
                        new_product_ids += ',' + arr[i];
                    }
                }
                product_ids_elm.val(new_product_ids.substr(1));
            }
        });

        // 确认选中
        form.on("submit(layConfirm)", function(data){
            var checkStatus = table.checkStatus('tableList'),
                data = checkStatus.data,
                ids = [];
            if(data.length > 0) {
                for (var i in data) {
                    ids.push(data[i].id);
                }
                //var ids_str = ids.join(',');

                // 添加商品
                var product_ids_elm = $(parent.window.frames[0].document).find('.product_ids');
                var product_ids = product_ids_elm.val();
                // if(product_ids){
                //     product_ids = product_ids + ',' + ids_str;
                // }else{
                //     product_ids = ids_str;
                // }
                // product_ids_elm.val(product_ids);


                // 打开新窗口
                var content = set_productprice_url;
                //content += '?product_ids=' + ids_str;
                content += '?product_ids=' + product_ids;
                var index = layer.open({
                    title : "设置调价",
                    type : 2,
                    area : ["800px", "600px"],
                    content : content,
                    success : function(layero, index){
                        form.render();
                    }
                });
            }else{
                layer.msg("请选择需要调价的商品");
            }
        });
    });
</script>
{/block}